<template>
  <div class="button-container">
    <div>专题</div>
    <div class="nav-item" :class="{ 'active-nav-item': activeNavItem1 === 'case' }" @click="activateNavItem('case')" @click.stop="Case()"> 清单方案</div>
  </div>
  <div v-if="resourceIds.length > 0">
    <Card v-for="resourceId in resourceIds" :key="resourceId" :resourceId="resourceId"/>
  </div>
</template>

<script lang="ts">
import Card from "@/components/CardOne.vue";
import {resourceApi} from "@/api/resourceApi.js";

export default {
  data() {
    return {
      activeNavItem1: 'case',
      activeNavItem2: '',
      case: true,
      skills: false,
      resourceIds:[],
      coverName:[],
      tags:'劳动教育/劳动导航/清单方案',
      agriculture: false,
      industry: false,
      service: false
    };
  },
  components: {
    Card
  },
  methods: {
    load() {
      resourceApi.searchResources(this.tags, '')
          .then(async result => {
            const res = result.data;
            this.resourceIds = res.map(item => item.resourceId);
            this.coverName = res.map(item => item.coverName);
          })
    },
    activateNavItem(id) {
      this.activeNavItem1 = id;
    },
    Case() {
      this.case = true;
      this.skills = false;
      this.activeNavItem1 = 'case';
      this.agriculture = false;
      this.industry = false;
      this.service = false;
      this.tags = '劳动教育/劳动导航/清单方案';
      this.load();
    },
  },
  created() {
    this.load();
  }
};
</script>

<style scoped>
.button-container {
  display: flex;
  align-items: center;
}

.nav-item {
  padding: 10px 20px;
  border-radius: 20px;
  display: flex; /* 使用flex布局 */
  text-align: center; /* 文本居中 */
  background-color: white; /* 默认背景颜色 */
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
  cursor: pointer; /* 鼠标悬停时显示小手 */
}

.nav-item:hover {
  color: #007bff; /* 鼠标悬停时的字体颜色 */
  background-color: #e6e6fa; /* 鼠标悬停时的背景颜色 */
}

.nav-item:active {
  color: #007bff; /* 鼠标点击时的字体颜色 */
  background-color: #e6e6fa; /* 鼠标点击后保持白色背景 */
}
.active-nav-item {
  background-color: #e6e6fa !important; /* 确保背景色为白色 */
  color: #007bff !important; /* 确保字体颜色 */
}
.card {
  display: flex;
  border: 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.card-img {
  width: 150px;
  height: auto;
  object-fit: cover;
}

.card-content {
  padding: 16px;
  color: black;
  flex: 1;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
}

.card-info {
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
}
</style>